<template>
  <div class="side">
    <!-- 提交 -->
    <div class="regiter">
      <el-row>
        <el-button @click="createData()" class="dakai" type="primary">提交</el-button>
      </el-row>
    </div>
    <div style="width:100%;">
      <el-form :model="EduxcloudWeiXin" label-position="right" label-width="300px" ref="dataForm">
        <el-form-item label="APPID" style="margin-top: 20px;">
          <el-input style="width:800px;" v-model="EduxcloudWeiXin.appId"></el-input>
        </el-form-item>
        <el-form-item label="公众号名称" style="margin-top: 20px;">
          <el-input style="width:800px;" v-model="EduxcloudWeiXin.name"></el-input>
        </el-form-item>
        <el-form-item label="公众号微信号">
          <el-input style="width:800px;" v-model="EduxcloudWeiXin.weixinId"></el-input>
        </el-form-item>
        <el-form-item label="公众号原始ID">
          <el-input style="width:800px;" v-model="EduxcloudWeiXin.weixinInitId"></el-input>
        </el-form-item>
        <el-form-item label="公众号二维码路径">
          <el-input style="width:800px;" v-model="EduxcloudWeiXin.qrCodePath"></el-input>
        </el-form-item>
        <el-form-item label="公众号token">
          <el-input style="width:800px;" v-model="EduxcloudWeiXin.token"></el-input>
        </el-form-item>
        <el-form-item label="域名">
          <el-input style="width:800px;" v-model="EduxcloudWeiXin.domain"></el-input>
        </el-form-item>
        <el-form-item label="第三方用户唯一凭证密钥">
          <el-input style="width:800px;" v-model="EduxcloudWeiXin.secret"></el-input>
          <p style="margin:0;color:#606266">提示：第三方用户唯一凭证密钥，即appsecret或appkey,与paySignKey不同。</p>
        </el-form-item>
        <el-form-item label="公众号类型">
          <el-select style="width:120px;" v-model="EduxcloudWeiXin.weixinType">
            <el-option
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in weixinTypeList"
            />
          </el-select>
          <p style="margin:0;color:#606266">提示：订阅号dingyue；服务号fuwu；test测试号。</p>
        </el-form-item>
        <el-form-item label="获取信息时的accesstoken">
          <el-input style="width:800px;" v-model="EduxcloudWeiXin.accessToken"></el-input>
        </el-form-item>
        <el-form-item label="accesstoken过期时间">
          <el-date-picker
            v-model="EduxcloudWeiXin.accessTokenExpireTime"
            type="datetime"
            placeholder="选择日期"
            style="width: 500px;"
          />
        </el-form-item>
        <el-form-item label="jssdk使用ticket过期时间">
          <el-date-picker
            v-model="EduxcloudWeiXin.jsapiTicketExpireTime"
            type="datetime"
            placeholder="选择日期"
            style="width: 500px;"
          />
        </el-form-item>
        <el-form-item label="jssdk使用的ticket">
          <el-input :rows="10" type="textarea" style="width:800px;" v-model="EduxcloudWeiXin.jsapiTicket"></el-input>
        </el-form-item>
        <el-form-item label="微信是否验证">
          <el-radio-group v-model="EduxcloudWeiXin.isAuthed">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否接管">
          <el-radio-group v-model="EduxcloudWeiXin.isTakeOver">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否公用">
          <el-radio-group v-model="EduxcloudWeiXin.isShare">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否放弃">
          <el-radio-group v-model="EduxcloudWeiXin.isGiveUp">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {addEduxcloudWeiXin, getEduxcloudWeiXin} from '@/api/system/wechatSet';
  import {getTenantId} from '@/utils/auth';

  export default {
    data() {
      return {
        EduxcloudWeiXin: {
          name: '',
          weixinId: '',
          weixinInitId: '',
          qrCodePath: '',
          token: '',
          domain: '',
          secret: '',
          weixinType: 'dingyue',
          accessToken: '',
          accessTokenExpireTime: '',
          jsapiTicket: '',
          jsapiTicketExpireTime: '',
          isAuthed: '',
          isTakeOver: '',
          isShare: '',
          isGiveUp: '',
        },
        weixinTypeList: [
          {label: '订阅号', value: 'dingyue'},
          {label: '服务号', value: 'fuwu'},
          {label: '测试号', value: 'test'}
        ],
      };
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getEduxcloudWeiXin(getTenantId()).then(response => {
          this.EduxcloudWeiXin = response.data
        }).catch(err => {
          console.log(err)
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.EduxcloudWeiXin.tenantId = getTenantId();
            addEduxcloudWeiXin(this.EduxcloudWeiXin).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .side {
    padding: 20px;
  }

  .regiter {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #e7e9ed;
    padding-top: 15px;
    padding-right: 34px;
    bottom: 25px;
  }

  .dakai {
    float: right;
    position: absolute;
    right: 10px;
    bottom: -25px;
  }
</style>
